<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
#opercationdialog .opercationdiv {
	margin-top: 80px;
	margin-left: 10px;
}

#rolename {
	width: 150px;
}

.roletablediv, .roleusertablediv {
	float: left;
}

.roleusertablediv {
	margin-left: 10px;
}
</style>
<!-- 角色数据表 -->
<div class="roletablediv">
	<table id="roletable"></table>
</div>
<div class="roleusertablediv">
	<table id="roleusertable"></table>
</div>
<div id="opercationdialog">
	<div class="opercationdiv">
		<label>角色名</label>&nbsp;<input id="rolename">
	</div>
</div>
<div id="addusertoroledialog">
	<table id="usertable"></table>
</div>
<script>
	var id;
	var addOrUpdate = true;
	$(document).ready(function() {
		//初始化角色表数据
		initRoleTableData();
		//初始化操作窗口
		initOpercationDialog();
		//初始化增加用户到角色对话框
		initAddUserToRoleDialog();
		//初始化角色名输入框
		$('#rolename').validatebox({
			required : true,
			validType : 'length[1,40]'
		});
	})
	//初始化角色表数据
	function initRoleTableData() {
		$('#roletable').datagrid({
			title : '角色列表',
			nowrap : true,
			striped : true,
			width : 450,
			pagination : true,
			singleSelect : true,
			rownumbers : true,
			url : basePath + 'system/getRolesByPageAndSize',
			onClickRow : function(rowIndex, rowData) {
				//初始化角色用户数据表
				initRoleUserTableData(rowData);
			},
			toolbar : [ {
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					openAddRoleDialog();
				}
			}, '-', {
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					deleteRole();
				}
			}, '-', {
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					openUpdateRoleDialog();
				}
			} ],
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'id',
				title : 'ID',
				width : 100,
				align : "center",
				hidden : true
			}, {
				field : 'name',
				title : '角色名',
				width : 360,
				align : "center",
				formatter : function(value, rowData, rowIndex) {
					var str = value;
					if (rowData.code < 0) {
						str = "<label style='color:red;'>" + value + "</label>"
					}
					return str;
				}
			} ] ]
		});
	}
	//初始化弹出增加批量任务窗口
	function initOpercationDialog() {
		$('#opercationdialog').dialog({
			width : 250,
			height : 250,
			title : "增加/修改角色",
			closable : true,
			closed : true,
			modal : true,
			buttons : [ {
				text : '确定',
				iconCls : 'icon-ok',
				handler : function() {
					if (addOrUpdate) {
						addRole();
					} else {
						updateRole();
					}
				}
			}, {
				text : '取消',
				iconCls : 'icon-no',
				handler : function() {
					$('#opercationdialog').dialog('close');
				}
			} ]
		});
	}
	//初始化增加用户到角色对话框
	function initAddUserToRoleDialog() {
		$('#addusertoroledialog').dialog({
			width : 700,
			title : "增加用户到角色",
			closable : true,
			closed : true,
			modal : true,
			buttons : [ {
				text : '确定',
				iconCls : 'icon-ok',
				handler : function() {
					addUserToRole();
				}
			}, {
				text : '取消',
				iconCls : 'icon-no',
				handler : function() {
					$('#addusertoroledialog').dialog('close');
				}
			} ]
		});
	}
	//打开增加角色对话框
	function openAddRoleDialog() {
		addOrUpdate = true;
		$('#opercationdialog').dialog('setTitle', "增加角色");
		$('#opercationdialog').dialog('open');
	}
	//打开修改角色对话框
	function openUpdateRoleDialog() {
		var selection = $('#roletable').datagrid('getSelected');
		if (selection) {
			if (selection.code != -1) {
				addOrUpdate = false;
				id = selection.id;
				$('#rolename').val(selection.name);
				$('#opercationdialog').dialog('setTitle', "修改角色");
				$('#opercationdialog').dialog('open');
			} else {
				showRightMsg('系统保留角色不能修改');
			}
		} else {
			showRightMsg('请选择需要修改的角色');
		}
	}
	//增加角色
	function addRole() {
		$.ajax({
			url : basePath + "system/addRole",
			data : {
				name : $('#rolename').val()
			},
			type : "post",
			dataType : "json",
			success : function(result) {
				if (result.flag) {
					showRightMsg('操作成功');
					$('#roletable').datagrid('reload');
				} else {
					showRightMsg('操作失败');
				}
			}
		})
		$('#rolename').val("");
	}
	//修改角色
	function updateRole() {
		$.ajax({
			url : basePath + "system/updateRole",
			data : {
				name : $('#rolename').val(),
				id : id
			},
			type : "post",
			dataType : "json",
			success : function(result) {
				if (result.flag) {
					showRightMsg('操作成功');
					$('#roletable').datagrid('reload');
				} else {
					showRightMsg('操作失败');
				}
			}
		})
		$('#rolename').val("");
	}
	//删除角色
	function deleteRole() {
		var selection = $('#roletable').datagrid('getSelected');
		if (selection) {
			if (selection.code  >= 0) {
				$.messager.confirm('确认', '你确定删除该角色吗?', function(r) {
					if (r) {
						$.ajax({
							url : basePath + "system/deleteRole",
							data : {
								id : selection.id
							},
							type : "post",
							dataType : "json",
							success : function(result) {
								if (result.flag) {
									showRightMsg('操作成功');
									$('#roletable').datagrid('reload');
								} else {
									showRightMsg('操作失败');
								}
							}
						})
					}
				});
			} else {
				showRightMsg('系统保留角色不能删除');
			}
		} else {
			showRightMsg('请选择需要删除的角色');
		}
	}
	//初始化角色用户数据表
	function initRoleUserTableData(rowData) {
		$('#roleusertable').datagrid({
			title : rowData.name + '-用户列表',
			nowrap : true,
			striped : true,
			width : 680,
			pagination : true,
			singleSelect : true,
			rownumbers : true,
			queryParams : {
				id : rowData.id
			},
			url : basePath + 'system/getUsersByRoleId',
			toolbar : [ {
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					openAddUserToRoleDialog();
				}
			}, '-', {
				text : '移除',
				iconCls : 'icon-remove',
				handler : function() {
					deleteUserRole();
				}
			} ],
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'id',
				title : 'ID',
				width : 100,
				align : "center",
				hidden : true
			}, {
				field : 'account',
				title : '账号',
				width : 200,
				align : "center"
			}, {
				field : 'name',
				title : '姓名',
				width : 200,
				align : "center"
			}, {
				field : 'phone',
				title : '联系方式',
				width : 200,
				align : "center"
			} ] ]
		});
	}
	//打开增加用户到角色对话框
	function openAddUserToRoleDialog() {
		initUserTableData();
		$('#addusertoroledialog').dialog('open');
	}
	//初始化用户数据表
	function initUserTableData() {
		$('#usertable').datagrid({
			title : '用户列表',
			nowrap : true,
			striped : true,
			width : 680,
			pagination : true,
			rownumbers : true,
			url : basePath + 'user/getUsersByPageAndSize',
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'id',
				title : 'ID',
				width : 100,
				align : "center",
				hidden : true
			}, {
				field : 'account',
				title : '账号',
				width : 200,
				align : "center"
			}, {
				field : 'name',
				title : '姓名',
				width : 200,
				align : "center"
			}, {
				field : 'phone',
				title : '联系方式',
				width : 200,
				align : "center"
			} ] ]
		});
	}
	//增加用户到角色 
	function addUserToRole() {
		var selections = $('#usertable').datagrid('getSelections');
		var selection = $('#roletable').datagrid('getSelected');
		var ids = [];
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		if (ids.length != 0) {
			$.ajax({
				url : basePath + "system/addUserToRole",
				data : {
					ids : ids,
					id : selection.id
				},
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.flag) {
						showRightMsg('操作成功');
						$('#roleusertable').datagrid('reload');
					} else {
						showRightMsg('操作失败');
					}
				}
			})
		} else {
			showRightMsg('请选择要增加到该角色的用户');
		}
	}
	//从角色中移除用户
	function deleteUserRole() {
		var selection = $('#roleusertable').datagrid('getSelected');
		var ids = [];
		if (selection) {
			ids.push(selection.id);
			$.ajax({
				url : basePath + "system/deleteUserRole",
				data : {
					ids : ids
				},
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.flag) {
						showRightMsg('操作成功');
						$('#roleusertable').datagrid('reload');
					} else {
						showRightMsg('操作失败');
					}
				}
			})
		} else {
			showRightMsg('请选择要从该角色移除的用户');
		}
	}
</script>